<template>
    <div>
        分类页
        <p>store中的count:{{ count }}</p>
        <p>store中的计算属性doublecount:{{ doubleCount }}</p>
        <p>
            <button @click="addCount">同步的+1</button>
            <button @click="addCountStep(10)">同步的+10</button>
            <button @click="addCountAsync">异步+1</button>
            <button @click="addCountStepAsync(10)">异步+10</button>
        </p>
        <ul>
            <li v-for="item in schoollist" :key="item.id">
                {{ item.school_name }}
            </li>
        </ul>
        <hr />
        <ul>
            <li v-for="item in filterSchoollist" :key="item.id">
                {{ item.school_name }}
            </li>
        </ul>

    </div>
</template>

<script>
// 第二种方式访问仓库中的数据使用辅助函数的形式
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
// console.log('mapState', mapState);
// console.log(11, { ...mapState(['count', 'schoollist']) });
// console.log(22, mapMutations(['addCount', 'addCountStep']));
export default {
    data() {
        return {
            // 定义数据
        }
    },
    computed: {
        ...mapState(['count', 'schoollist']),
        ...mapGetters(['doubleCount', 'filterSchoollist'])
    },
    methods: {
        ...mapMutations(['addCount', 'addCountStep']),
        ...mapActions(['addCountAsync', 'addCountStepAsync', 'initSchoollistAsync'])
    },
    mounted() {
        console.log('this-category', this);
        // 请求学校列表数据
        this.initSchoollistAsync()

    }
}
</script>
<style scoped></style>